<div data-lift="surround?with=me;at=main">
  <title data-lift="DocumentSnippet.title"></title>

  <div data-spy="affix" data-offset-top="0">
    <div class="me-affix">
      <button type="button" class="btn btn-default" title="显示边栏">
        <i class="fa fa-angle-double-right"></i>
      </button>
      <input type="hidden" name="next-fa" value="fa-angle-double-left"/>
      <input type="hidden" name="next-status" value=""/>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div id="page-side" class="hidden">
        <div data-lift="embed?what=/h/user/_info"></div>
        <div data-lift="embed?what=/h/document/_documents_panel"></div>
      </div>
      <div id="page-main" class="col-md-12 col-lg-12">
        <div class="panel panel-default" data-lift="DocumentSnippet.edit">
          <div class="panel-heading">
            <div class="pull-right">
              <a target="_blank" href="preview" title="预览">
                <i class="fa fa-eye fa-2x"></i>
              </a>
            </div>
            <strong class="panel-title">编辑文档</strong>
          </div>
          <div class="panel-body">
            <form class="form" data-lift="form.ajax?class=form">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">分　类</span>
                  <select class="form-control" id="doc-categories"></select>
                    <span class="input-group-btn">
                      <button name="new-category" data-toggle="modal" class="btn btn-default">
                        <i class="fa fa-plus"></i>
                      </button>
                    </span>
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">标　题</span>
                  <input type="text" class="form-control" name="title"/>
                </div>
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">副标题</span>
                  <input type="text" class="form-control" name="subtitle"/>
                </div>
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">标　签</span>
                  <input type="text" class="form-control" name="tags"/>
                </div>
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">短　名</span>
                  <input type="text" class="form-control" name="slug"/>
                </div>
              </div>
              <div class="form-group" id="control-content">
                <div>
                  <ul class="nav nav-tabs" id="doc-tab">
                    <li class="active">
                      <a href="#doc-editor" data-toggle="tab">编辑</a>
                    </li>
                    <li>
                      <a href="#doc-preview" data-toggle="tab">预览</a>
                    </li>
                  </ul>
                  <div class="space-10"></div>
                  <div class="tab-content">
                    <div class="tab-pane active" id="doc-editor">
                      <textarea class="form-control doc-editor" rows="30" name="content"
                                placeholder="在此编写文档（支持Markdown）"></textarea>
                    </div>
                    <div class="tab-pane" id="doc-preview">
                      <div class="doc-preview" style="min-height:64px;"></div>
                    </div>
                  </div>
                  <span class="help-block"></span>
                </div>
              </div>
              <div class="form-group">
                <div>
                  <button type="submit" class="btn btn-primary">保存</button>
                  <input type="hidden" name="submit"/>
                </div>
              </div>
            </form>
          </div>

          <div class="modal fade">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                  </button>
                  添加分类
                </div>
                <div class="modal-body" style="min-height:120px;">
                  <form class="form" data-lift="form.ajax?class=form">
                    <div class="form-group">
                      <label class="control-label">分类</label>

                      <div>
                        <input type="text" name="category" class="form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="control-label">排序</label>

                      <div>
                        <input type="number" name="sort-by" class="form-control"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <button type="submit" class="btn btn-primary">添加分类</button>
                      <input type="hidden" name="submit"/>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <script data-lift="tail" src="/assets/js/me.document.edit.js"></script>
</div>
